<template>
  <div>
    <el-dialog
      :title="statusInfo.hostNumber ? '编辑主机号' : '设置主机号'"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="refForm"
        label-width="100px"
        inline
      >
        <el-form-item size="small" label="主机号" prop="hostNumber">
          <el-input
            v-model="addForm.hostNumber"
            clearable
            placeholder="请输入主机号"
            size="small"
            style="width: 300px"
            maxlength="20"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqUtdSetHostNumber } from "@api/api.js";
import {
  validateNumberLetter,
  validateNoChinese,
  validateNumber,
} from "@utils/validate";
import { mapState } from "vuex";

export default {
  props: ["deviceInfo", "statusInfo"],
  components: {},
  data() {
    return {
      dialogVisible: false,

      addForm: {
        hostNumber: "",
      },
      rules: {
        hostNumber: [
          { required: true, message: "请输入主机号", trigger: "blur" },
          {
            validator: validateNumber,
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        if (this.statusInfo.hostNumber) {
          this.addForm.hostNumber = this.statusInfo.hostNumber;
        }
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    // 点击绑定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        const res = await reqUtdSetHostNumber({
          deviceCode: this.deviceInfo.imei,
          hostNumber: this.addForm.hostNumber,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("设置成功");
        this.$emit("update");
        this.closeDialog();
      });
    },

    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();

      this.addForm.hostNumber = "";

      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../views/common.less");
// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}

.tip {
  color: #999;
  font-size: 12px;
  line-height: 22px;
  padding-left: 30px;
  .label {
  }
}
</style>
